<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>loading动画</title>
	<style type="text/css">
		html,body{
			height: 100vh;
			margin: 0;
			padding: 0;
			background: linear-gradient(270deg,rgba(255,149,41,1) 0%,rgba(255,102,34,1) 100%);
		}
		.loading-wrapper{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 120px;
			width: 180px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		.circle-wrapper{
			height: 60px;
			position: relative;
		}
		.circle{
			width: 20px;
			height: 20px;
			background: #fff;
			border-radius: 50%;
			position: absolute;
			top: 60px;
			left: 30px;
			animation: circle .5s alternate infinite ease;
		}
		.circle:nth-child(2){
			left: 80px;
			animation-delay: .2s;
		}
		.circle:nth-child(3){
			left: 130px;
			animation-delay: .3s;
		}
		@keyframes circle{
		    0%{
		        top: 60px;
		        height: 5px;
		        border-radius: 50px 50px 25px 25px;
		        transform: scaleX(1.7);
		    }
		    40%{
		        height: 20px;
		        border-radius: 50%;
		        transform: scaleX(1);
		    }
		    100%{
		        top: 0;
		    }
		}
		.shadow-wrapper{
			position: relative;
			height: 4px;
		}
		.shadow{
		    width: 20px;
		    height: 4px;
		    border-radius: 50%;
		    background-color: rgba(0,0,0,.5);
		    position: absolute;
		    top: 0;
		    transform-origin: 50%;
		    left: 30px;
		    filter: blur(1px);
		    animation: shadow .5s alternate infinite ease;
		}

		@keyframes shadow{
		    0%{
		        transform: scaleX(1.5);
		    }
		    40%{
		        transform: scaleX(1);
		        opacity: .7;
		    }
		    100%{
		        transform: scaleX(.2);
		        opacity: .4;
		    }
		}
		.shadow:nth-child(2){
		    left: 80px;
		    animation-delay: .2s
		}
		.shadow:nth-child(3){
		    left: 130px;
		    animation-delay: .3s;
		}
		.text{
			color: #fff;
			font-weight: bold;
			font-size: 18px;
			letter-spacing: 18px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="loading-wrapper">
		<div class="circle-wrapper">
			<div class="circle"></div>
			<div class="circle"></div>
			<div class="circle"></div>
		</div>
		<div class="shadow-wrapper">
			<div class="shadow"></div>
			<div class="shadow"></div>
			<div class="shadow"></div>
		</div>
		<div class="text">Loading</div>
	</div>
</body>
</html>